<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册页面</title>
    <link href="https://cdn.jsdelivr.net/npm/remixicon@4.3.0/fonts/remixicon.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../styles/style_login_register.css">
</head>
<body>
<div id="page" class="site">
    <div class="container">
        <div class="Register">
            <div class="left">
                <h1>注册页面 For Denselin</h1>
                <h5>如果您已经有账户<br>您可以 <a href="javascript:void(0);" onclick="redirectToLogin()">在这里登录</a></h5>
            </div>
            <div class="main">
                <form id="registerForm">
                    <div class="form-group">
                        <input type="text" name="username" placeholder="您的用户名" required>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" placeholder="您的密码" required>
                    </div>
                    <div class="form-group">
                        <input type="email" name="email" placeholder="您的邮箱" required>
                    </div>
                    <div class="form-group">
                        <input type="tel" name="phone" placeholder="您的电话" required>
                    </div>
                    <div class="form-group">
                        <select name="gender" required>
                            <option value="">选择性别</option>
                            <option value="male">男</option>
                            <option value="female">女</option>
                            <option value="other">其他</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <input type="date" name="birthdate" required>
                    </div>
                    <div class="form-group">
                        <button type="button" onclick="submitRegister()">注册</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // 提交注册表单
    function submitRegister() {
        const form = document.getElementById('registerForm');
        const username = form.username.value.trim();
        const password = form.password.value.trim();
        const email = form.email.value.trim();
        const phone = form.phone.value.trim();
        const gender = form.gender.value;
        const birthdate = form.birthdate.value;

        // 检查是否所有字段都已填写
        if (!username || !password || !email || !phone || !gender || !birthdate) {
            alert('请填写所有字段。');
            return;
        }

        // 发送注册请求到后端
        fetch('/register', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                username,
                password,
                email,
                phone,
                gender,
                dob: birthdate
            }),
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    alert('注册成功，正在跳转至登录页面...');
                    redirectToLogin(username, password);
                } else {
                    alert(data.message || '注册失败，请重试。');
                }
            })
            .catch(error => {
                alert(error.message || '网络错误，请稍后再试。');
            });
    }

    // 跳转到登录页面，并传递用户名和密码
    function redirectToLogin(username = '', password = '') {
        const loginUrl = `/pages/index.html?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`;
        window.location.href = loginUrl;
    }
</script>
</body>
</html>
